<template>
  <main>
    <c-header />
    <am-container>
      <div class="am-u-sm-12 am-u-md-4" v-for="(dsg, index) in designer" :key="index">
        <div class="flex-box">

          <!-- 头像 -->
          <section class="designer am-vertical-align item1">
            <router-link :to="'/designerDetail/' + dsg.designerID" class="am-vertical-align-middle">
              <am-image v-lazy="static_pic + dsg.headImagePath" :src="''" :round="true" :responsive="true" />
            </router-link>
          </section>

          <!-- 基础信息 -->
          <div class="am-text-truncate item2">
            <!-- <p>id·{{ dsg.designerID }}</p> -->
            <p>姓名·{{ dsg.name }}</p>
            <p>介绍·{{ dsg.introduction }}</p>
          </div>
        </div>
      </div>

      <!-- 滚动加载更多infinite-scroll-immediate-check="false" -->
      <div class="am-u-sm-12">
        <div class="load-more"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="busy"
          infinite-scroll-distance="20">
          <am-image src="/static/loading-svg/loading-spinning-bubbles.svg" v-show="loading" alt="" />
        </div>
      </div>

      <div class="am-end"></div>
    </am-container>
  </main>
</template>

<script>
import Header from '@/components/Header'

export default {
  name: 'designer-list',
  data() {
    return {
      busy: true,
      loading: true,
      inGame: {
        '全部作品': -1,
        '参赛中作品': 1
      },
      designer: [],
      page: {
        num: 1,
        per: 3,
        res: {
          count: 0,
          total: 0
        }
      }
    }
  },
  methods: {
    ready() {
      this.loadData()
    },
    loadData() {
      this.loadDesigners();
    },
    loadDesigners(flag = false) {
      this.loading = true;
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETDESIGNERPAGED, {
          gameID:	+this.$store.getters.gameID,
          pageNum: +this.page.num,
          numPerPage: +this.page.per
        }).then(res => {
          this.page.res = res.data.data.page;
          if(flag) {// 滚动追加
            this.designer = this.designer.concat(
              res.data.data.designer
            );
          } else {// 首次加载
            this.designer = res.data.data.designer;
            this.busy = false;
          }
        }).then(() => {
          this.loading = false;
        });
      });
    },
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        this.page.num = Math.min(this.page.res.count + 1, ++this.page.num);
        if(this.page.num <= this.page.res.count) {
          this.loadDesigners(true);
        }
      }, 799);
    }
  },
  components: {
    CHeader: Header
  },
  mounted() {
    this.ready();
  }
}
</script>

<style lang="less" scoped>
/*
  grid布局有兼容性问题
  参考：https://caniuse.com/#search=grid
*/
.grid-box {
  background-color: #fff; width: 100%; padding: .8rem; margin: .7rem 0;
  border-radius: .5rem; -webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4); box-shadow:2px 2px 5px rgba(0,0,0,0.4);
  /* grid */
  display: -ms-grid;
  display: grid; 
  -ms-grid-rows: 1fr; 
      grid-template-rows: 1fr;
  -ms-grid-columns: 1fr 2fr;
      grid-template-columns: 1fr 2fr;
  grid-column-gap: .5rem;
}
/*
  使用flex实现与grid同样的效果
*/
.flex-box {
  background-color: #fff; width: 100%; padding: .8rem; margin: .7rem 0;
  border-radius: .5rem; -webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.4); box-shadow:2px 2px 5px rgba(0,0,0,0.4);
  /* flex */
  display: flex;
  justify-content: space-between;
  .item1 {
    max-width: 35%;
    flex-grow: 1;
  }
  .item2 {
    max-width: 60%;
    flex-grow: 3;
  }
}

.load-more {
  height: 70px;
  line-height: 70px;
  text-align: center;
}
</style>